<template>
  <div class="commentPostPage">
     <!-- 评论输入框 -->
  
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
        <van-button color="#ed3651" @click="articleAddComment">发送</van-button>
  </div>
</template>

<script>
import { postArticleComment} from '@/service/getDate'
export default {
  name: 'commentPost', 
  data () {
    return {
      getComment: [], // 评论响应的数据
      message: '', // 评论输入框的文本
      popupShow: false, // 评论输入框开关
    }
  },
  props: {
    articleId: {
      type: [Number,String,Array],
      required: true,
    },
  },
  // 依赖注入
  inject: {
    replyId: {
      type: [Array,Object,Number,String],
      default: null, // 没有传值则为空
    }
  },
   methods: {
    // 对文章进行评论
   async articleAddComment() {
      try {
        const {data} = await postArticleComment({
          target: this.articleId,
          content: this.message,
          art_id: this.replyId ? this.replyId : null,
        })
        this.getComment = data.data
        this.message = ''
        this.$toast.success('评论成功')
        this.$emit('commentOnLoad')
      } catch(err) {
        console.log(err);
        if(err.response.status === 401) {
          this.$toast.fail('账号未登录')
        }
      }
    },
   }
}
</script>

<style lang="scss" scoped>
.commentPostPage {
  display: flex;
  align-items: center;
  height: 80%;
 /deep/ .van-field {
        .van-cell__value {
          padding: 0 10px;
          border-radius: 10px;
          background-color: #f5f5f5;
          .van-field__control {
            height: 150px !important;
            padding: 10px;
          }
        }
      }
      .van-button {
        width:170px;
        height: 100px;
        margin-right: 30px;
        padding: 0;
        border-radius: 15px;
      }
}
</style>